import * as THREE from 'three';
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const scene = new THREE.Scene();

const width = window.innerWidth;
const height = window.innerHeight;

import animation from './animation';
scene.add(animation.map);
import group from './group';
scene.add(group);

const camera = new THREE.PerspectiveCamera(70, width / height, 1, 3000);
camera.position.set(500, 500, 900);
camera.lookAt(0, 0, 0);

const pointLight = new THREE.PointLight(0xffffff);
pointLight.decay = 0.0;
pointLight.intensity = 3;
pointLight.position.set(400, 800, 300);
scene.add(pointLight);

// 创建一个环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
scene.add(ambientLight);

const axesHelper = new THREE.AxesHelper(50);
scene.add(axesHelper);

// 创建一个 WebGL 渲染器
const renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setSize(width, height);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.render(scene, camera);

window.onresize = function () {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}

// 循环渲染
const loopRender = () => {
    animation.texture.offset.x += 0.008;
    // 重新渲染
    renderer.render(scene, camera);
    // 循环执行 loopRender 函数
    requestAnimationFrame(loopRender)
}
loopRender()

// 添加相机控件控制器 OrbitControls
new OrbitControls(camera, renderer.domElement);

export const render = () => {
    const dom = document.getElementById('render-canvas');
    dom.appendChild(renderer.domElement);
}

